<template>
	<view>
		<tt-bar title="系统通知" leftIcon="icon-back"></tt-bar>
		<view class="msgTabBar">
			<text class="tabItem" :class="[showType==1?'active':'']" @tap="toggleType(1)" >重要消息</text>
			<view class="line"></view>
			<text class="tabItem" :class="[showType==2?'active':'']" @tap="toggleType(2)" >交易消息</text>
			<view class="line"></view>
			<text class="tabItem" :class="[showType==3?'active':'']" @tap="toggleType(3)" >退款消息</text>
			<view class="line"></view>
			<text class="tabItem" :class="[showType==4?'active':'']" @tap="toggleType(4)" >其他消息</text>
		</view>
		<scroll-view scroll-y="true" class="noticeList" :style="{'height':scHeight+'px','background-color':'#f6f6f6'}" @scrolltolower="getData">
			<view class="nctList">
				<block v-for="(item,index) in ntcList">
					<text class="ctime">{{item.createTime}}</text>
					<noticeItem :notice="item" :key="index"></noticeItem>
				</block>
				<empty-box v-if="ntcList.length<1" type="message"></empty-box>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import noticeItem from "@/components/noticeItem/noticeItem.vue";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			}),
		},
		components: {
			ttBar,
			emptyBox,
			noticeItem
		},
		data() {
			return {
				scHeight:uni.getSystemInfoSync().screenHeight-uni.getSystemInfoSync().statusBarHeight-uni.upx2px(180),
				showType:1,
				ntcList:[],
				page_no:1,
				page_size:10,
				hasNext:true
			};
		},
		watch:{
			userInfo(newVal){
				this.page_no=1;
				this.hasNext=true;
				this.ntcList=[];
				this.getData();
			}
		},
		methods:{
			toggleType(e){
				this.showType=parseInt(e);
				this.ntcList=[];
				this.hasNext=true;
				this.page_no=1;
				this.getData()
			},
			getData(){
				if(this.hasNext){
					this.$store.dispatch("apiGetNociteList",{
						userId:this.userInfo.userId,
						level:this.showType,
						page_no:this.page_no,
						page_size:this.page_size
					}).then(res=>{
						this.ntcList=this.ntcList.concat(res.data.data.items);
						this.hasNext=res.data.data.hasNext;
						this.page_no=res.data.data.nextPage;
					})
				}else{
					uni.showToast({
						title: '没有更多新的消息了',
						icon: 'none'
					});
				}
			}
		},
		onLoad(cfm) {
			if(cfm.level){
				this.showType=parseInt(cfm.level) ;
			}
			if(this.isLogin){
				
				this.getData();
			}else{
				if (uni.getStorageSync('token')) {
					this.$store.dispatch("loginByToken").then(res=>{})
				}else{
					this.toPage({
						url:'loging'
					})
				}
				
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.ntcList=[];
				this.hasNext=true;
				this.page_no=1;
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.ctime{
		font-size: 28upx;
		text-align: center;
		padding: 4upx 20upx;
		border-radius: 20upx;
		background-color: #EEEEEE;
		color: #999999;
		align-self: center;
		margin-top:16upx ;
		margin-bottom: 10upx;
	}
	.msgTabBar {
		display: flex;
		height: 90upx;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
		border-top:1px solid  #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
		.line {
			width: 3rpx;
			height: 28rpx;
			background-color: #efefef;
			margin: 0 30upx;
		}

		text {
			font-size: 28rpx;
			color: #5b5b5b;
			line-height: 88upx;
			height: 88upx;
			box-sizing: border-box;
			display: inline-block;
		}
		.active{
			line-height: 88upx;
			border-bottom: 8upx solid #fbc521;
			color: #fba121;
		}
	}
	.noticeList{
		display: flex;
		flex-direction: column;
		padding: 0 16upx;
		box-sizing: border-box;
	}
	.nctList{
		padding-top: 16upx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
